import {ArrowLeftOutlined} from '@ant-design/icons'
import {Button, Drawer, Space, Table, Tabs} from "antd";
import {useEffect, useState} from "react";
import {getRecordTask, getRecordTaskListByStageAndListType} from "../../../api/recordTaskApi";


function FirstTrial(props){

    const {TabPane} = Tabs

    const [data_0, setData0] = useState()
    const [data_1, setData1] = useState()
    const [data_2, setData2] = useState()
    const [data_3, setData3] = useState()

    const [drawerVisible, setDrawerVisible] = useState(false)

    const [currentTask, setCurrentTask] = useState(
        {

        }
    )

    const onDrawerClose = () => {
        setDrawerVisible(false)
    }

    const getData = () => {
        const route = props.route.path
        let stage
        if (route === '/todo/firstTrial'){
            stage = 1
        } else if (route === '/todo/siteInvestigation'){
            stage = 2
        } else if (route === '/todo/recheck'){
            stage = 3
        }

        getRecordTaskListByStageAndListType(stage, 0, 20)
            .then(res => {
                setData0(res)
            })

        getRecordTaskListByStageAndListType(stage, 1, 20)
            .then(res => {
                setData1(res)
            })


        getRecordTaskListByStageAndListType(stage, 2, 20)
            .then(res => {
                setData2(res)
            })


        getRecordTaskListByStageAndListType(stage, 3, 20)
            .then(res => {
                setData3(res)
            })
    }

    const columns = [
        {
            title: '功能列',
            dataIndex: 'action',
            key: 'action',
            render:(text,record)=>(
                <Space size={"small"}>
                    <a href={"/todo/examine/"+record.id+"?menu=todo"}>审核</a>
                    <a>详情</a>
                    <a>流程履历</a>
                </Space>
            )
        },
        {
            title: '停车场名称',
            dataIndex: 'name',
            key: 'name'
        },
        {
            title: '办结剩余时限',
            dataIndex: 'restNodeDays',
            key: 'restNodeDays'
        },
        {
            title: '所在环节',
            dataIndex: 'processType',
            key: 'processType'
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status'
        },
        {
            title: '流水号',
            dataIndex: 'sno',
            key: 'sno'
        },
        {
            title: '所属区域',
            dataIndex: 'districtName',
            key: 'districtName'
        },
        {
            title: '申请时间',
            dataIndex: 'submitedAt',
            key: 'submitedAt'
        }
    ]

    const goBack = () => {
        window.location.href = '../todo?menu=todo'
    }

    useEffect(() => {
        getData()
    }, []);


    function MyTitle(){
        switch (props.route.path) {
            case '/todo/firstTrial': return (
                <span>资料初审</span>
            )
            case '/todo/siteInvestigation': return (
                <span>现场勘查</span>
            )
            case '/todo/recheck': return (
                <span>资料复审</span>
            )
        }
    }

    return(
        <div className={'component_container'}>

            <Drawer
                title="资料审核"
                placement={'right'}
                closable={true}
                visible={drawerVisible}
                key={'right'}
                onClose={onDrawerClose}
            >
                <div>
                    {currentTask.name}
                </div>
            </Drawer>

            <div className={'component_title'}>
                <span style={{marginRight: 20,cursor:'pointer'}} onClick={goBack}>
                    <ArrowLeftOutlined />
                </span>
                <MyTitle/>
            </div>

            <Tabs defaultActiveKey="1">
                <TabPane tab="待处理" key="1">
                    <Table onRow={(record) => {
                        return {
                            onClick: () => {
                                setDrawerVisible(true)
                                console.log(record)
                                setCurrentTask(record)
                            }
                        }
                    }} dataSource={data_0} columns={columns}/>
                </TabPane>
                <TabPane tab="即将过期处理" key="2">
                    <Table dataSource={data_1} columns={columns}/>
                </TabPane>
                <TabPane tab="过期处理" key="3">
                    <Table dataSource={data_2} columns={columns}/>
                </TabPane>
                <TabPane tab="已处理" key="4">
                    <Table dataSource={data_3} columns={columns}/>
                </TabPane>
            </Tabs>


        </div>
    )
}

export default FirstTrial